<template>
  <scroll-view scroll-y class="viewport" v-if="goods">
    <!-- 图片轮播图 -->
    <view class="goods">
      <!-- 商品主图 -->
      <view class="preview">
        <swiper>
          <swiper-item
            class="item"
            @click="previewImg(item)"
            v-for="item in goods?.mainPictures"
            :key="item"
          >
            <image mode="aspectFill" :src="item" />
          </swiper-item>
        </swiper>
      </view>
      <!-- 浏览的索引 -->
      <view class="indicator">
        <text class="current">1</text>
        <text class="split">/</text>
        <text class="total">{{ goods?.mainPictures.length }}</text>
      </view>
    </view>

    <!-- 商品简介 -->
    <view class="meta">
      <view class="price">
        <view class="symbol">¥</view>
        <view class="number">{{ goods.price }}</view>
      </view>
      <!-- 简介 -->
      <view class="name ellipsis">{{ goods.name }}</view>
      <!-- 描述 -->
      <view class="desc"> {{ goods.desc }}</view>
    </view>

    <!-- 操作面板 -->
    <view class="action">
      <!-- 选择 -->
      <view class="item arrow">
        <text class="lable">选择</text>
        <text class="text ellipsis">请选择商品规格</text>
      </view>
      <!-- 送至 -->
      <view class="item arrow" @tap="openPopup('address')">
        <text class="lable">送至</text>
        <text class="text ellipsis">请选择收获地址</text>
      </view>
      <!-- 服务 -->
      <view class="item arrow" @tap="openPopup('service')">
        <text class="lable">服务</text>
        <text class="text ellipsis">无忧退 快速退款 免费包邮</text>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail panel">
      <!-- 标题 -->
      <view class="title">
        <text class="text">详情</text>
      </view>
      <!--内容 -->
      <view class="content">
        <!-- 属性内容 -->
        <view class="properties">
          <!-- 属性详情 -->
          <view class="item" v-for="item in goods.details.properties" :key="item">
            <text class="label">{{ item.name }}</text>
            <text class="value">{{ item.value }}</text>
          </view>
        </view>

        <!-- 图片详情 -->
        <image
          v-for="item in goods.details.pictures"
          :key="item"
          mode="widthFix"
          :src="item"
        ></image>
      </view>
    </view>

    <!-- 底部菜单 -->
    <view class="toolbar">
      <view class="icons">
        <Button class="icons-button"> <text class="icon-heart"></text>收藏 </Button>
        <Button class="icons-button" open-type="contact">
          <text class="icon-handset"></text>客服
        </Button>
        <navigator class="icons-button" url="/src/pages/my/my">
          <text class="icon-cart"></text>购物车
        </navigator>
      </view>
      <view class="buttons">
        <view class="addcart"> 加入购物车 </view>
        <view class="buynow"> 立即购买 </view>
      </view>
    </view>

    <!--评分弹出框 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <Servicepanel v-if="popupName === 'service'" @close="onTabClose"></Servicepanel>
      <AddressPanel v-if="popupName === 'address'" @close="onTabClose"></AddressPanel>
    </uni-popup>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Servicepanel from './components/Servicepanel'
import AddressPanel from './components/AddressPanel'
import { getGoodsByIdAPI } from '@/services/home'
import { onLoad, onReady } from '@dcloudio/uni-app'
import type { GoodsResult } from '@/types/good'

// 获得id
const props = defineProps<{
  id: string
}>()

// 商品结果集
const goods = ref<GoodsResult>()

// 获得弹出框类型
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

const onTabClose = () => {
  console.log('22222')
  popup.value?.close()
}

// 定义类型
const popupName = ref<'address' | 'service'>()
// 弹出下拉框
const openPopup = (name: typeof popupName.value) => {
  console.log('对对赌地')
  // 修改弹出层名称
  popupName.value = name
  // 打开弹出层
  popup.value?.open()
}

// api获取数据
const getgoodByid = async () => {
  // console.log(props.id)
  let res = await getGoodsByIdAPI(props.id)
  goods.value = res.result
  console.log(res.result)
}

// 预览商品大图
const previewImg = (url: string) => {
  console.log('突突突')
  uni.previewImage({
    current: url,
    urls: goods.value?.mainPictures!,
  })
}
onLoad(() => {
  getgoodByid()
})
// getgoodByid()
// onReady(async () => {
//   await getgoodByid()
// })
</script>

<style lang="scss" scoped>
.viewport {
  height: 100%;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f4f4f4;

  .goods {
    position: relative;

    .preview {
      width: 100vw;
      height: 730rpx;

      .item {
        width: 100%;
        height: 100%;
        overflow: hidden;

        image {
          width: 750rpx;
          height: 750rpx;
        }
      }
    }

    .indicator {
      position: absolute;
      right: 20rpx;
      bottom: 30rpx;
      border-radius: 20rpx;
      width: 100rpx;
      height: 45rpx;
      background-color: #96a7af;
      font-size: 30rpx;
      line-height: 1em;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      .current {
        margin-right: 3rpx;
      }

      .total {
        margin-left: 3rpx;
        font-size: 27rpx;
      }
    }
  }

  // 商品简介
  .meta {
    border-bottom: 1rpx solid #eaeaea;
    background-color: #ffffff;

    .price {
      width: 100vw;
      height: 140rpx;
      background-color: #35c8a9;
      display: flex;
      align-items: center;
      color: #fff;
      padding-left: 40rpx;

      .symbol {
        font-size: 25rpx;
        padding: 15rpx 5rpx 0 0;
      }

      .number {
        font-size: 56rpx;
      }
    }

    .name {
      max-height: 88rpx;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }

    .desc {
      line-height: 1;
      font-size: 26rpx;
      padding: 0 20rpx 30rpx;
    }
  }

  //操作面板
  .action {
    padding-left: 30rpx;
    background-color: #ffffff;

    .item {
      display: flex;
      align-items: center;
      height: 90rpx;
      border-bottom: 1rpx solid #eaeaea;
      position: relative;

      .lable {
        font-size: 30rpx;
        color: #898b94;
        margin: 0 16rpx 0 10rpx;
      }

      .text {
        flex: 1;
        -webkit-line-clamp: 1;
      }

      .ellipsis {
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  // 伪类操作
  .arrow {
    &::after {
      position: absolute;
      top: calc(50% - 16rpx);
      right: 30rpx;
      content: '\e6c2';
      font-size: 32rpx;
      line-height: 1em;
      color: #ccc;
      font-family: 'erabbit' !important;
      font-size: 32rpx;
    }
  }

  // 详情
  .detail {
    margin-top: 30rpx;

    .title {
      font-size: 40rpx;
      padding: 16rpx 35rpx 0 35rpx;
      line-height: 1.2em;

      .text {
        border-left: 6rpx solid #35c8a9;
        padding-left: 10rpx;

        // position: relative;
        // &::before{
        //   position: absolute;
        //   content: '';
        //   left: 0;
        //   top: 0;
        //   width: 3rpx;
        //   height: 100%;
        //   background-color: #35c8a9;
        // }
      }
    }

    .content {
      .properties {
        margin: 50rpx 20rpx;

        .item {
          display: flex;
          font-size: 32rpx;
          line-height: 3em;
          border-bottom: 1rpx solid #35c8a9;

          .label {
          }

          .value {
            margin-left: 30rpx;
          }
        }
      }

      image {
        width: 100%;
      }
    }
  }

  .toolbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100rpx;
    z-index: 1;
    background-color: #fff;
    display: flex;
    padding: 0 20rpx var(--window-bottom);

    // 按钮
    .icons {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 45%;

      .icons-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
        color: #333;
        background-color: transparent; /* 设置背景颜色为透明 */
        border: none; /* 去除边框 */
        padding: 0; /* 去除内边距 */
      }
    }

    //功能
    .buttons {
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      flex: 1;

      & > view {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;
        border-radius: 100rpx;
        // padding: 30rpx 50rpx;
        width: 180rpx;
        text-overflow: ellipsis;
        font-size: 28rpx;
        color: #f4f4f4;
        background-color: #fff;
        // line-height: 1em;
      }

      .addcart {
        background-color: #ffa868;
      }

      .buynow {
        background-color: #27ba9b;
      }
    }
  }
}

.panel {
  background-color: #fff;
}

// }
</style>
